<template>
	<view class="snowy-page">
		<view class="snowy-flex-vh-center logo-content">
			<image class="logo" :alt="sysBaseConfig.SNOWY_SYS_NAME" :src="sysBaseConfig.SNOWY_SYS_LOGO" mode="scaleToFill">
			</image>
			<text class="title">{{sysBaseConfig.SNOWY_SYS_NAME}} {{sysBaseConfig.SNOWY_SYS_VERSION}}</text>
		</view>
		<view class="register-form">
			<view class="snowy-shadow snowy-flex-v-center input-item">
				<uni-icons class="icon" type="person-filled" size="20" color="#5677fc"></uni-icons>
				<input v-model="registerForm.account" class="input" type="text" placeholder="请输入校园一卡通号" maxlength="30" />
			</view>
			
			<view class="snowy-shadow snowy-flex-v-center input-item">
				<uni-icons class="icon" type="locked-filled" size="20" color="#5677fc"></uni-icons>
				<input v-model="registerForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
			</view>
			
			<view class="snowy-shadow snowy-flex-v-center input-item">
				<uni-icons class="icon" type="locked-filled" size="20" color="#5677fc"></uni-icons>
				<input v-model="registerForm.confirmPassword" type="password" class="input" placeholder="请确认密码" maxlength="20" />
			</view>
			
			<!--<view class="snowy-shadow snowy-flex-v-center input-item">
				<uni-icons class="icon" type="map-filled" size="20" color="#5677fc"></uni-icons>
				<input v-model="registerForm.validCode" type="text" class="input" placeholder="请输入图形验证码" maxlength="4" />
				<image :src="validCodeBase64" @click="loginCaptcha" class="login-code-img" mode="scaleToFill"></image>
			</view>-->
			
			<!--<view class="snowy-shadow snowy-flex-v-center input-item">
				<uni-icons class="icon" type="phone-filled" size="20" color="#5677fc"></uni-icons>
				<input v-model="registerForm.phone" type="number" class="input" placeholder="请输入手机号" maxlength="11" />
			</view>-->
			
			<!--<view class="snowy-shadow snowy-flex-v-center input-item">
				<uni-icons class="icon" type="chat-filled" size="20" color="#5677fc"></uni-icons>
				<input v-model="registerForm.phone" type="number" class="phone_input" placeholder="点击授权手机号" maxlength="11" />
				<button class="get-code-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">{{codeText}}</button>
			</view>-->

			<view>
				<tui-button margin="70rpx 0"  :shadow="true" open-type="getPhoneNumber" @getphonenumber="handleRegister">注册</tui-button>
			</view>
			
			<view class="login-link">
				已有账号？<text class="link" @click="goToLogin">立即登录</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import loginApi from '@/api/auth/login-api'
import store from '@/store'
import smCrypto from '@/utils/sm-crypto'
const userPhone = ref('')
// 系统配置
const sysBaseConfig = computed(() => {
	return store.getters.sysBaseConfig
})

// 验证码相关
const validCodeBase64 = ref("")
const codeText = ref('授权手机号')
const counting = ref(false)
let timer = null

// 注册表单
const registerForm = ref({
	account: '',
	password: '',
	confirmPassword: '',
	validCode: '',
	validCodeReqNo: '',
	phone: '',
	smsCode: ''
})

// 获取图形验证码
const loginCaptcha = async () => {
	const data = await loginApi.getPicCaptcha()
	validCodeBase64.value = data?.validCodeBase64
	registerForm.value.validCodeReqNo = data?.validCodeReqNo
}

// 初始化获取验证码
loginCaptcha()

// 获取短信验证码
const getVerifyCode = async () => {
	if (counting.value) return
	if (!registerForm.value.phone) {
		uni.$snowy.modal.msgError("请输入手机号")
		return
	}
	if (!/^1[3-9]\d{9}$/.test(registerForm.value.phone)) {
		uni.$snowy.modal.msgError("请输入正确的手机号")
		return
	}
	if (!registerForm.value.validCode) {
        uni.$snowy.modal.msgError("请先输入图形验证码")
        return
    }
	
    console.log("调用了函数")
	console.log(registerForm.value.validCodeReqNo)
	const res = await loginApi.getPhoneValidCode({phone: registerForm.value.phone, validCodeReqNo: registerForm.value.validCodeReqNo, validCode: registerForm.value.validCode})
	
	counting.value = true
	let count = 60
	codeText.value = `${count}s后重新获取`
	
	timer = setInterval(() => {
		count--
		codeText.value = `${count}s后重新获取`
		if (count <= 0) {
			clearInterval(timer)
			codeText.value = '获取验证码'
			counting.value = false
		}
	}, 1000)
}
const getPhoneNumber = async (e) => {
	    console.log(e)
		let res = await new loginApi.AuthPhone(e.detail.code)
		console.log(res)
		//userPhone.value = res.phoneNumber// 获取到手机号
		registerForm.value.phone = res?.phoneNumber
		//将用户的信息发送给后台，后台根据用户的信息判断用户是否是新用户
		/*uni.login({
			provider: 'weixin',
			success: async function(res){
				loginApi.wxloginPhone({code:res.code,phone:phone.value}).then(data =>{
					//TODO将数据在前端保存，并登入到系统中(具体保存什么内容等后续讨论)
					console.log("获取后台用户信息成功")
					console.log(data)
				}).catch(error =>{
					console.log("后台微信登录失败")
				})
			}
		})*/
        //暂时不注册微信账户，先采用手机号注册。
	}
// 注册方法
// 注册处理函数需要声明为 async
const handleRegister = async (e) => {
	console.log(e.code)
	let res = await new loginApi.AuthPhone(e.code)
	registerForm.value.phone = res?.phoneNumber
    if (registerForm.value.account === "") {
        uni.$snowy.modal.msgError("请输入账号")
    } else if (registerForm.value.password === "") {
        uni.$snowy.modal.msgError("请输入密码")
    } else if (registerForm.value.password !== registerForm.value.confirmPassword) {
        uni.$snowy.modal.msgError("密码不一致")
    } /* else if (registerForm.value.phone === "") {
        uni.$snowy.modal.msgError("请输入手机号")
    }*/
    /* else if (registerForm.value.smsCode === "") {
        uni.$snowy.modal.msgError("请输入短信验证码")
    } else if (registerForm.value.validCode === "") {
        uni.$snowy.modal.msgError("请输入图形验证码")
    }*/
	else {
        //const res = await loginApi.register({account: registerForm.value.account, password: registerForm.value.password, validCodeReqNo: registerForm.value.validCodeReqNo, validCode: registerForm.value.validCode})
        const paramData = {
				account: registerForm.value.account,
				// 密码进行SM2加密，传输过程中看到的只有密文，后端存储使用hash
				password: smCrypto.doSm2Encrypt(registerForm.value.password),
				phone: registerForm.value.phone
			}
		const res = await loginApi.register(paramData)
		uni.$snowy.modal.msgSuccess("注册成功")
        goToLogin()
    }
}

// 跳转到登录页
const goToLogin = () => {
	uni.$snowy.tab.navigateTo('/pages/auth/login')
}

// 组件销毁时清除定时器
/*onUnmounted(() => {
	if (timer) {
		clearInterval(timer)
		timer = null
	}
})*/
</script>

<style lang="scss" scoped>
page {
	background-color: #ffffff;
}

.logo-content {
	margin: 15% auto;
	
	.logo {
		width: 100rpx;
		height: 100rpx;
	}
	
	.title {
		font-size: 40rpx;
		margin-left: 15rpx;
	}
}
.phone_input {
			width: 70%;
			font-size: 30rpx;
			padding-left: 25rpx;
		}
.register-form {
	margin: 60rpx auto;
	width: 80%;
	
	.input-item {
		margin: 35rpx auto;
		background-color: #f5f6f7;
		height: 90rpx;
		
		.icon {
			margin-left: 20rpx;
		}
		
		.input {
			width: 100%;
			font-size: 30rpx;
			padding-left: 25rpx;
		}
		
		.login-code-img {
			cursor: pointer;
			width: 70%;
			height: 85rpx;
		}
		
		.get-code-btn {
			padding: 0 20rpx;
			font-size: 26rpx;
			color: #5677fc;
			white-space: nowrap;
		}
	}
	
	.login-link {
		text-align: center;
		font-size: 28rpx;
		color: #999;
		margin-top: 30rpx;
		
		.link {
			color: #5677fc;
			margin-left: 10rpx;
		}
	}
}
</style>